<template>
  <div class="container">
    <div class="top">
      <ps-header :title="company" :showDecoration5="false"></ps-header>

      <div class="tools">
        <div class="left">
          <el-button
            v-for="(item, index) in options"
            :key="item.Udef1"
            type="primary"
            @click="show(item, index)"
            :class="{ ps_btn_active: index === active }"
          >
            {{ item.Udef1 }}
          </el-button>
          <el-input style="width: 170px; margin-left: 10px" placeholder="请输入暂估单号" v-model="BillNO" />
        </div>
        <div class="right">
          <span>本页共{{ total }}条数据</span>
        </div>
      </div>
    </div>

    <ps-borderbox6 class="content">
      <div style="overflow: hidden" :style="{ height: machineList.length > 0 ? '67%' : '100%' }">
        <dv-scroll-board :config="config" :key="key"></dv-scroll-board>
      </div>
    </ps-borderbox6>
  </div>
</template>

<script setup name="zgkb">
import { zgkb } from '@/api/processClassNow.js'
import { ref, onMounted, computed, reactive, nextTick, onUnmounted, inject, watch } from 'vue'
import { formatHeaderData } from '@/utils/globalMethod'
import { userStore } from '@/pinia/user'
import { formatMoney } from '@/utils/globalMethod'
import moment from 'moment'

const active = ref(999)
//按钮
const options = ref([
  {
    value: 1,
    Udef1: '进料检验'
  },
  {
    value: 2,
    Udef1: '全检'
  },
  {
    value: 3,
    Udef1: '包装'
  }
])
const key = ref(1)
const user = userStore().profile
const isFullscreen = inject('isFullScreen')
const total = ref()
const machineList = ref([])
const socket = inject('socket')
//接收
const route = useRoute()
const BillNO = ref()
const itemAll = ref({})
const config = reactive({
  data: [],
  header: [
    '暂估单号',
    '来料日期',
    '物料编号',
    '产品名称',
    '供应商代码',
    '数量',
    '预出库日',
    '当前工序',
    '交期天数',
    '检验天数'
  ],
  headerBGC: 'rgba(0,0,0,0)',
  oddRowBGC: 'rgba(0,0,0,0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
  columnWidth: [70, 200, 170, 180, 300, 170, 170, 170, 170, 170, 170],
  rowNum: 15,
  index: true,
  carousel: 'page',
  waitTime: 1000 * 20
})

// 动态控制标题内容
const company = computed({
  get() {
    const _company = user.company

    const sub = active.value === 999 ? '' : `-${options.value[active.value].Udef1}`

    return _company + sub
  }
})

// 获取看板信息以及机台信息
const show = async (item, index, billno) => {
  if (!item) {
    item = options.value[0]
  }
  itemAll.value = item
  let params = {
    billno: '',
    gx: '',
    lineID: '',
    jt: ''
  }
  params.lineID = params.gx = !item ? '' : item.Udef1
  params.billno = billno
  const { data, total: _total } = await zgkb(params)
  config.data = data.map(item => {
    // const BillDate = item.BillDate
    item.BillDate = item.BillDate > 0 ? moment(`${item.BillDate}`).format('YYYY-MM-DD') : ''
    item.yckrq = item.yckrq > 0 ? moment(`${item.yckrq}`).format('YYYY-MM-DD') : ''
    item.Quantity = formatMoney(null, item.Quantity)
    if (item.zt == '') {
      item.zt = '待1QC检验'
    }
    if (item.zt == '进料检验') {
      item.zt = '待全检'
    }
    if (item.zt == '全检') {
      item.zt = '待包装'
    }
    if (item.jqsxts >= 3 || item.jysxts >= 4) {
      for (let k in item) {
        item[k] = formatHeaderData(item[k], 'red')
      }
    } else if (item.jqsxts >= 2) {
      for (let k in item) {
        item[k] = formatHeaderData(item[k], '#0084ff') //颜色调整
      }
    } else if (item.jqsxts >= 1) {
      for (let k in item) {
        item[k] = formatHeaderData(item[k], 'orange')
      }
    }
    // const today = moment().format('YYYYMMDD')
    // if( item.jqsxts > 0 && item.jqsxts < 3){
    //   console.log(item.jqsxts >0)
    //   for (let k in item) {
    //     item[k] = formatHeaderData(item[k], 'red')
    //   }

    // }else if(3 < item.jqsxts && item.jqsxts < 4){
    //   for (let k in item) {
    //     item[k] = formatHeaderData(item[k], '#b500fd')
    //   }
    // }else if(1 < today - BillDate && today - BillDate < 2 ){
    //   for (let k in item) {
    //     item[k] = formatHeaderData(item[k], 'Orange')
    //   }
    // }else if(today - BillDate > 2){
    //   for (let k in item) {
    //     item[k] = formatHeaderData(item[k], 'yellow')
    //   }
    // }

    return [
      item.BillNO,
      item.BillDate,
      item.ProdID,
      item.ProdName,
      item.CustID,
      item.Quantity,
      item.yckrq,
      item.zt,
      item.jqsxts,
      item.jysxts
    ]
  })
  active.value = index
  total.value = _total
}

// 获取工序 =>  查询所有数据
const info = async () => {
  // const { data, total } = await getgxdlxxNow()
  // options.value = data
  show(false, 999)
}
//数据刷新时间
const timer = setInterval(
  async () => {
    await info()
  },
  1000 * 60 * 5
)

let timer2 = null

onMounted(() => {
  window.addEventListener('resize', () => {
    nextTick(() => {
      const status = !document.fullscreenElement ? false : true

      if (status) {
        // 全屏
        config.columnWidth = [70, 200, 170, 180, 300, 170, 170, 170, 160, 170, 170]
        key.value++
      } else {
        config.columnWidth = [70, 200, 170, 180, 300, 170, 170, 170, 160, 170, 170]
      }

      // key.value++
    })
  })

  const item = options.value[0]
  show(item, 0)
  //按钮刷新时间
  timer2 = setInterval(
    async () => {
      active.value++
      if (active.value >= options.value.length) {
        active.value = 0
      }
      const item = options.value[active.value]
      show(item, active.value)
    },
    1000 * 60 * 3
  )

  socket.receiveMessage('report-system-update', async data => {
    await info()
  })
})

onUnmounted(() => {
  clearInterval(timer)
  socket.removeAllListeners('report-system-update')
})

watch(BillNO, (newValue, oldValue) => {
  if (newValue !== null && newValue !== undefined && newValue !== '') {
    show(itemAll.value, active.value, newValue)
  }
})
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  background-image: url('../../assets/image/visualization-bg.png');
  display: flex;
  flex-direction: column;

  .top {
    .tools {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        flex: 1;
        display: flex;
        :deep(.el-button:hover) {
          background-color: #ffa500;
          border-color: #ffa500;
        }
      }

      .right {
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        margin-left: auto;
        margin-right: 30px;
      }
    }
  }

  .content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

:deep(.dv-scroll-board .rows .row-item) {
  font-size: 16px;
  letter-spacing: 0px;
}

:deep(.dv-scroll-board .header .header-item) {
  font-size: 16px;
  letter-spacing: 0px;
}
</style>
